<style scoped lang="less">
  .comment-info-container {
    padding: 10px;
  }

  .cell-item {
    font-size: 14px;
    width: 90%;
    display: flex;
    align-items: flex-start;
    padding: 5px;
    transition: background-color 300ms ease;
  }

  .cell-item:hover {
    background-color: #fafafa;
  }

  .cell-title {
    min-width: 20%;
    color: #515a6e;
  }

  .cell-content {
    color: #808695;
    word-break: break-all;
  }
  .comment-img{
    width: 100px;
    height: 100px;
    cursor: pointer;
  }
  .head-img{
    width: 70px;
    height: 70px;
    border-radius: 50%;
  }
</style>
<template>
  <div v-if="data!=null" class="comment-info-container">
    <div class="cell-item">
      <div class="cell-title">用户头像</div>
      <div class="cell-content">
        <img class="head-img" :src="data.userInfo.head_img">
      </div>
    </div>
    <div class="cell-item">
      <div class="cell-title">昵称</div>
      <div class="cell-content">{{data.userInfo.nickname}}</div>
    </div>
    <div class="cell-item">
      <div class="cell-title">活动/商品</div>
      <div class="cell-content">
        <router-link target="_blank" :to="'/actives/active-info/'+data.goods_id+'/1'">{{data.goods_title}}</router-link>
      </div>
    </div>
    <div class="cell-item">
      <div class="cell-title">套餐</div>
      <div class="cell-content">{{data.sku_title}}</div>
    </div>
    <div class="cell-item">
      <div class="cell-title">评分</div>
      <div class="cell-content">{{data.rate}}</div>
    </div>
    <div class="cell-item">
      <div class="cell-title">日期</div>
      <div class="cell-content">{{data.create_time}}</div>
    </div>
    <div class="cell-item">
      <div class="cell-title">评价内容</div>
      <div class="cell-content">{{data.content}}</div>
    </div>
    <div class="cell-item">
      <div class="cell-title">图片</div>
      <div class="cell-content" v-if="data.imgs!=null">
        <img @click="show(GLOBAL.getUrl(item))" class="comment-img" :src="GLOBAL.getUrl(item,true)" v-for="item in data.imgs">
      </div>
    </div>

  </div>
</template>
<script>
  import {get} from '@/api/comment'

  export default {
    name: 'comment-detail',
    data() {
      return {
        data: null
      };
    },
    props: {
      id: {type: Number, default: -1}
    },
    watch: {
      id: function () {
        this.getData();
      }
    },
    methods: {
      show(url){
        window.open(url, '_blank')
      },
      getData() {
        if (this.id === -1) {
          return;
        }
        get(this.id).then(rep => {
          if (rep.data.data.imgs !== null) {
            rep.data.data.imgs = JSON.parse(rep.data.data.imgs);
          }
          this.data = rep.data.data;
        })
      }
    }
  }
</script>